import React from 'react';
import { Link } from 'react-router-dom';
import { Card, WingBlank, WhiteSpace, Tag } from 'antd-mobile';

const ProductCard = ({ product }) => {
  return (
    <WingBlank size="lg">
      <WhiteSpace size="lg" />
      <Link to={`/product/${product.id}`}>
        <Card className="card">
          <Card.Header
            title={product.name}
            thumb={product.image}
            thumbStyle={{ width: '80px', height: '80px' }}
            extra={<Tag small style={{ backgroundColor: '#1890ff', color: 'white' }}>¥{product.price}</Tag>}
          />
          <Card.Body>
            <div>{product.description}</div>
          </Card.Body>
          <Card.Footer 
            content={product.category} 
            extra={<div>{product.stock > 0 ? `库存: ${product.stock}` : '缺货'}</div>} 
          />
        </Card>
      </Link>
      <WhiteSpace size="lg" />
    </WingBlank>
  );
};

export default ProductCard;